<template>
  <div class="instrument-detail">
    
    <el-row gutter="20">
      <!-- 图片部分 -->
      <el-col :span="10" class="image-container">
        <img
          :src="'http://localhost:8080/images/upload/' + instrument.image"
          :alt="instrument.name + '图片'"
          class="instrument-image"
        />
      </el-col>

      <!-- 右侧信息 -->
      <el-col :span="14" class="info-container">
        <!-- 乐器标题 -->
        <h2 class="instrument-title">{{ instrument.name }}</h2>

        <!-- 基本信息 -->
        <p><strong>类型：</strong>{{ instrument.type }}</p>

        <!-- 关联音乐 -->
        <p>
          <strong>关联音乐：</strong>
          <!-- 如果 music_id 为 0，则显示 '暂时没有关联歌曲' -->
          <span v-if="instrument.music_id === 0">
            暂时没有关联歌曲
          </span>
          <!-- 否则，显示点击跳转的链接 -->
          <span v-else @click="goToPlayer(instrument.music_id, instrument.type)" style="cursor: pointer; color: #3b2a2a;">
            点击去听
          </span>
        </p>

        <!-- 收藏按钮 -->
        <el-button
          type="warning"
          class="favorite-button"
          @click="toggleFavorite"
        >
          <span>{{ isCollected ? "已收藏" : "收藏" }}</span>
        </el-button>
      </el-col>

      <!-- 音频播放 -->
      <el-col :span="24" class="audio-container" >
        <div class="audio-section" v-if="instrument.audio" >
          <audio
            :src="'http://localhost:8080/images/upload/' + instrument.audio"
            controls
          ></audio>
        </div>
      </el-col>
    </el-row>

    <!-- 简介 -->
    <div class="info-section">
      <h3 class="section-title">简介</h3>
      <div class="instrument-content" v-html="formatContent(instrument.description)"></div>
    </div>

    <!-- 文化背景 -->
    <div class="info-section">
      <h3 class="section-title">文化背景</h3>
      <div class="instrument-content" v-html="formatContent(instrument.cultural)"></div>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
import { ArrowLeftBold } from "@element-plus/icons-vue";

export default {
  props: ["id"],
  data() {
    return {
      instrument: {
        name: "",
        type: "",
        image: "",
        audio: "",
        description: "",
        cultural: "",
        music_id: null,
      },
      isCollected: false, // 是否已收藏
      loading: true,
      error: false,
    };
  },
  created() {
    this.fetchInstrumentDetail();
    this.checkIfCollected();
  },
  methods: {
    fetchInstrumentDetail() {
      this.loading = true;
      axios
        .get(`/api/instruments/${this.id}`)
        .then((response) => {
          this.instrument = response.data;
        })
        .catch((error) => {
          this.error = true;
          console.error("获取乐器详情失败：", error);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 格式化内容，保留换行符
    formatContent(content) {
      if (!content) return '';
      return content.replace(/\n/g, '<br/>');
    },

    // 检查是否已收藏
    checkIfCollected() {
      const userId = sessionStorage.getItem("user_id"); // 动态获取用户ID
      if (!userId) {
        console.warn("未登录用户，无法查询收藏状态");
        return;
      }

      axios
        .get(`/api/collections/check`, {
          params: { userId, instrumentId: this.id },
        })
        .then((response) => {
          this.isCollected = response.data.collected; // 设置收藏状态
        })
        .catch((error) => {
          console.error("检查收藏状态失败：", error);
        });
    },

    // 收藏或取消收藏操作
    toggleFavorite() {
      const userId = sessionStorage.getItem("user_id"); // 动态获取用户ID
      if (!userId) {
        ElMessage.warning("请先登录后再进行收藏操作！");
        return;
      }

      const url = this.isCollected
        ? `/api/collections/delete`
        : `/api/collections/add`;

      const data = { user_id: userId, instrument_id: this.id };

      axios({
        method: this.isCollected ? "delete" : "post", 
        url,
        data,
      })
        .then((response) => {
          if (response.data.success) {
            this.isCollected = !this.isCollected; // 切换收藏状态
            const message = this.isCollected ? "收藏成功" : "取消收藏成功";
            ElMessage.success(message);
          } else {
            ElMessage.error("操作失败，请稍后再试！");
          }
        })
        .catch((error) => {
          console.error("收藏操作失败：", error);
          ElMessage.error("网络错误，请稍后重试！");
        });
    },
    // 跳转到 Player 页面
    goToPlayer(musicId, type) {
      this.$router.push({
        path: '/Player',
        query: { music_id: musicId, type: type }
      });
    },
  },
  components: {
    ArrowLeftBold, // 引入图标
  },
};
</script>

<style>
.instrument-detail {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* 确保宽度占满父容器 */
  max-width: 1200px; /* 可设置一个最大宽度，确保页面不太宽 */
  margin: 0 auto; /* 居中页面 */
}

.loading {
  text-align: center;
  font-size: 18px;
  color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading i {
  margin-right: 8px;
}

.error-message {
  color: #e74c3c;
  text-align: center;
  font-size: 18px;
}

.error-message .retry-link {
  color: #3498db;
  cursor: pointer;
}

.image-container {
  display: flex;
  justify-content: center;
}

.instrument-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 垂直居中 */
  align-items: center;     /* 水平居中 */
  text-align: center;      /* 文字居中 */
  width: 100%;
  max-width: 500px;        /* 限制宽度，防止过宽 */
  padding: 20px;
}

.instrument-title {
  font-size: 32px;
  font-family: 'Zhi Mang Xing', 'KaiTi', 'Songti SC', serif;  /* 使用有中国风的字体 */
  color: #3b2a2a;  /* 深棕色，符合古风的感觉 */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 增加阴影效果，提升立体感 */
  margin-bottom: 20px;  /* 底部边距 */
  letter-spacing: 1px; /* 调整字间距，增添艺术感 */
  line-height: 1.4;  /* 增加行高，使标题更有层次 */
  text-align: center;  /* 居中对齐 */
}

/* 基本信息部分 */
.info-container p {
  margin-bottom: 10px;
  font-size: 18px;
  color: #555;
}

.favorite-button {
  margin-top: 10px; /* 按钮与其他内容的间距 */
}

.audio-container {
  display: flex;
  justify-content: center; /* 水平居中音频播放 */
  margin-top: 20px;
  width: 100%;
  max-width: 500px; /* 限制音频播放器最大宽度 */
}

.audio-section {
  width: 100%;
  display: flex;
  justify-content: center; /* 确保播放控件居中 */
}

audio {
  width: 100%;  /* 播放器填充父容器 */
  max-width: 500px; /* 限制播放器最大宽度 */
}

/* 文化背景和描述部分 */
.info-section {
  margin-top: 20px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 900px; /* 设置最大宽度 */
  margin-left: auto;
  margin-right: auto; /* 让 info-section 居中 */
}

.section-title {
  font-family: 'Zhi Mang Xing', 'KaiTi', 'Songti SC', serif;
  font-size: 22px;
  margin-bottom: 10px;
  color: #666;
  text-align: center;
}

/* 确保内容部分保留空格和换行 */
.instrument-content {
  white-space: pre-wrap;  /* 保留换行符和空格 */
  word-wrap: break-word;  /* 防止长单词溢出 */
  font-family: 'Noto Serif SC', 'Songti SC', 'KaiTi', serif; /* 使用中国风字体 */
  font-size: 18px;  /* 适当增大字体 */
  color: #2e2e2e;  /* 深灰色，给人稳重典雅的感觉 */
  line-height: 1.8;  /* 增大行高，增强可读性 */
  letter-spacing: 0.5px; /* 适度的字间距 */
  text-align: justify;  /* 两端对齐 */
  margin: 20px 0;  /* 上下边距 */
  padding: 0 10px;  /* 左右内边距，避免文字紧贴边框 */
}

@media (max-width: 768px) {
  .instrument-detail {
    padding: 20px;
  }

  .image-container {
    margin-bottom: 20px;
  }

  .info-container {
    align-items: center;
  }

  .instrument-title {
    font-size: 26px;
  }
}
</style>
